<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="/css/zk_details.css">
    <script src="/js/jquery-3.4.1.min.js"></script>
    <script src="/js/ejs.js"></script>
</head>

<body>
    <header>
        <div class="header_box">
            <div class="w1200">
                <div id="js_hr">
                    <a href="/html/zk_sign.html">立即登录</a>
                    <a href="/html/zk_sign_in.html">免费注册</a>
                </div>
                <script>
                    var kill = document.querySelector("#js_hr")
                    var condition = /\/.+\//
                    var arr = document.cookie.match(condition)
                    var user = ""
                    arr != null ? (function () {
                        arr.forEach(function (item) {
                            user = item.includes("user") ? item : ""
                        })
                        user = user.substring(user.indexOf("user=") + 5, user.length - 1)
                        if (user) {
                            kill.innerHTML = `
                            <a href="/html/zk_sign.html" class="user">您好 ${user}  </a>
                            <a href="javascript:tuichu();">退出</a>`
                        }
                    })() : user = ""
                    function tuichu() {
                        var time = new Date()
                        time.setDate(time.getDate() - 1)
                        console.log(time)
                        document.cookie = `/user=${user}/;expires=${time}`
                        setTimeout(function () {
                            location.reload()
                        }, 800)
                    }
                </script>
            </div>
        </div>
    </header>
    <main>
        <div class="main_box">
            <div class="main_left">
                <div class="focus_pic">
                    <img src="https://mercrt-fd.zol-img.com.cn/t_s800x800f/g2/M00/0C/0B/ChMlWV1c6-eIS8VVAADN-3Zec8UAAMsJgHRpL4AAM4T548.jpg"
                        alt="">
                </div>
                <div class="focus_thumb">
                    <ul>
                        <li class="show"
                            style="background-image: url(https://mercrt-fd.zol-img.com.cn/t_s800x800f/g2/M00/0C/0B/ChMlWV1c6-eIS8VVAADN-3Zec8UAAMsJgHRpL4AAM4T548.jpg);">
                            <i class="show"></i></li>
                        <li
                            style="background-image: url(https://mercrt-fd.zol-img.com.cn/t_s800x800f/g4/M07/07/01/ChMlzF19pIiIfkZoAAFsxyr-2O8AAXqsAOjw_gAAWzf266.jpg);">
                            <i></i></li>
                    </ul>
                </div>
            </div>
            <div class="main_righ">
                <div class="product_title">魅族 M20（小黄人闪充版）</div>
                <div class="product_price">
                    <span>价格</span>
                    <div class="price">¥<em>129.00</em></div>
                </div>
                <div class="sales_activity">
                    <span>促　　销</span>
                    <ul class="sales_activity_list">
                        <li>领券</li>
                        <li>满2000减200</li>
                        <li>满3000减300</li>
                        <li>满1000减100</li>
                    </ul>
                </div>
                <div class="sku_select">
                    <div>
                        <span>颜色</span>
                        <ul>
                            <li class="show">双眼款<i></i></li>
                            <li>单眼款<i></i></li>
                        </ul>
                    </div>
                </div>
                <div class="deal_btn">
                    <span>数量</span>
                    <div>
                        <div class="amount_widget">
                            <span><i></i></span>
                            <input type="text" value="1" max="55">
                            <span><i></i></span>
                        </div>
                        <div class="amount_part">
                            件
                            <span>（库存：55件）</span>
                        </div>
                    </div>
                </div>
                <button class="btn">立即购买</button>
            </div>
        </div>
    </main>
    <footer>
        <div class="w1200">
            <div>
                <a href="">中关村在线</a>|
                <a href="">产品报价</a>|
                <a href="">论坛</a>|
                <a href="">问答</a>|
                <a href="">联系我们</a>
            </div>
            <p>©2019 中关村在线 版权所有.
                <a href="https://icon.zol.com.cn/icp.jpg" target="_blank">京ICP证150096号</a>
                京ICP备14061128号
                <a href="https://icon.zol.com.cn/wangwen.jpg" target="_blank">网络文化经营许可证京网文[2016]1631-199</a>
                <img src="https://icon.zol-img.com.cn/newshop/wap/shop_v2/gs.jpg" width="16" height="16">
            </p>
        </div>
    </footer>
    <script>
        function fdj() {
            var img_box = document.querySelector(".focus_pic")
            var img = img_box.querySelector("img")
            var img_but = document.querySelectorAll(".focus_thumb>ul>li")
            img_box.onmouseover = function () {
                img.style.transform = "scale(2.5)"
            }
            img_box.onmousemove = function (e) {
                var x = e.clientX - img_box.getBoundingClientRect().left
                var y = e.clientY - img_box.getBoundingClientRect().top
                img.style.top = `${-y * 1.5 + 300}px`
                img.style.left = `${-x * 1.5 + 300}px`
            }
            img_box.onmouseout = function () {
                img.style.transform = "scale(1)"
                img.style.top = 0
                img.style.left = 0
            }
            img_but.forEach(function (item) {
                item.onclick = function () {
                    img_but.forEach(function (item) {
                        item.querySelector("i").classList.remove("show")
                    })
                    item.querySelector("i").classList.add("show")
                    var src = item.style.backgroundImage
                    img.src = src.substring(src.indexOf("https:"), src.length - 2)
                }
            })
        }
    </script>
    <script>
        function li() {
            var sku_li = document.querySelectorAll(".sku_select li")
            sku_li.forEach(function (item) {
                item.onclick = function () {
                    sku_li.forEach(function (item) {
                        item.classList.remove("show")
                    })
                    item.classList.add("show")
                }
            })
        }
    </script>
    <script type="text/html" id="box">
        <div class="main_left">
            <div class="focus_pic">
                <img src="<%= data.img_src %>" alt="">
            </div>
            <div class="focus_thumb">
                <ul>
                    <li class="show"
                        style="background-image: url(<%= data.img_src %>);">
                        <i class="show"></i></li>
                    <li
                        style="background-image: url(https://mercrt-fd.zol-img.com.cn/t_s800x800f/g4/M07/07/01/ChMlzF19pIiIfkZoAAFsxyr-2O8AAXqsAOjw_gAAWzf266.jpg);">
                        <i></i></li>
                </ul>
            </div>
        </div>
        <div class="main_righ">
            <div class="product_title"><%= data.title %></div>
            <div class="product_price">
                <span>价格</span>
                <div class="price"><%- data.price %></div>
            </div>
            <div class="sales_activity">
                <span>促　　销</span>
                <ul class="sales_activity_list">
                    <li>领券</li>
                    <li>满2000减200</li>
                    <li>满3000减300</li>
                    <li>满1000减100</li>
                </ul>
            </div>
            <div class="sku_select">
                <div>
                    <span>颜色</span>
                    <ul>
                        <li class="show">黑色<i></i></li>
                        <li>白色<i></i></li>
                    </ul>
                </div>
            </div>
            <div class="deal_btn">
                <span>数量</span>
                <div>
                    <div class="amount_widget">
                        <span><i></i></span>
                        <input type="text" value="1" max="55">
                        <span><i></i></span>
                    </div>
                    <div class="amount_part">
                        件
                        <span>（库存：55件）</span>
                    </div>
                </div>
            </div>
            <button class="btn">立即购买</button>
        </div>
    </script>
    <script>
        var kopy = location.href
        var herf = kopy.substring(kopy.indexOf("id=") + 3)
        var sa = herf.substring(0, herf.indexOf("/"))
        var id = herf.substring(herf.indexOf("/") + 1)
        $.get("/php/zk_details.php", { id: id, sa: sa }, function (res) {
            var data = JSON.parse(res)
            if (data.img_src.indexOf("/t") != -1) {
                var img_hrd = data.img_src.substring(0, data.img_src.indexOf("/t") + 2)
                var img_fot = data.img_src.substring(data.img_src.indexOf("/g"))
                data.img_src = img_hrd + "_s800x800" + img_fot
            }
            var html = ejs.render($("#box").html(), { data: data })
            $(".main_box").html(html)
            fdj()
            li()
        })
    </script>
</body>

</html>